<template>
  <div class="screen-bg">
    <div class="screen-bg-main">
      <img class="screen-bg-img" src="@/assets/screen/tianjin-map.png" />

      <!-- 坐标点 -->
      <div class="location huayuan">
        <img class="location-flag" src="@/assets/screen/ico-flag.png" />
        <img class="location-ripple" id="left1" src="@/assets/screen/ico-ripple.svg" />
      </div>
      <div class="location bolong">
        <img class="location-flag" src="@/assets/screen/ico-flag.png" />
        <img class="location-ripple" id="left2" src="@/assets/screen/ico-ripple.svg" />
      </div>
      <div class="location haiyang">
        <img class="location-flag" src="@/assets/screen/ico-flag.png" />
        <img class="location-ripple" id="left3" src="@/assets/screen/ico-ripple.svg" />
      </div>

      <!-- 区域 -->
      <div class="area huayuan" id="right1" @click="onClick('huayuan')">
        <div class="area-txt">华苑科技园</div>
      </div>
      <div class="area bolong line-end" id="right2" @click="onClick('bolonghu')">
        <div class="area-txt">渤龙湖科技园</div>
      </div>
      <div class="area haiyang line-end" id="right3"  @click="onClick('haiyang')">
        <div class="area-txt">海洋科技园</div>
      </div>

      <!-- 托盘 -->
      <div class="tray huayuan">
        <div class="tray-title">华苑科技园</div>
        <div class="tray-bottom">
          <div class="tray-num">5</div>
          <div class="tray-unit">个</div>
        </div>
      </div>
      <div class="tray bolong">
        <div class="tray-title">渤龙湖</div>
        <div class="tray-bottom">
          <div class="tray-num">15</div>
          <div class="tray-unit">个</div>
        </div>
      </div>
      <div class="tray haiyang">
        <div class="tray-title">海洋科技园</div>
        <div class="tray-bottom">
          <div class="tray-num">13</div>
          <div class="tray-unit">个</div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import LeaderLine from 'leader-line-vue'

export default {
  name: 'screen-bg',
  methods: {
    buildLine() {
      const lines = []

      const l1 = this.$el.querySelector('#left1')
      const r1 = this.$el.querySelector('#right1')
      const line1 = LeaderLine.setLine(l1, r1, {color: '#02FBFF', path: 'grid', size: 2, endPlug: 'arrow3', endPlugSize: 2})

      const l2 = this.$el.querySelector('#left2')
      const r2 = this.$el.querySelector('#right2')
      const line2 = LeaderLine.setLine(l2, r2, {color: '#02FBFF', path: 'grid', size: 2, endPlug: 'arrow3', endPlugSize: 2})

      const l3 = this.$el.querySelector('#left3')
      const r3 = this.$el.querySelector('#right3')
      const line3 = LeaderLine.setLine(l3, r3, {color: '#02FBFF', path: 'grid', size: 2, endPlug: 'arrow3', endPlugSize: 2})


      lines.push(line1)
      lines.push(line2)
      lines.push(line3)

      this.lines = lines
    },
    onClick(key) {
      this.$emit('area-click', key)
    }
  },
  beforeDestroy() {
    if(this.lines) {
      this.lines.forEach(line => {
        line.remove()
      })
    }
  },
  mounted() {
    this.$nextTick(_ => {
      setTimeout(_ => {
        this.buildLine()
      }, 500)
    })
  }
}
</script>

<style lang="scss" scoped>
  .screen-bg {
    position: relative;
    height: 100%;
    width: 100%;

    &-main {
      position: absolute;
      left: 48%;
      top: 56%;
      transform: translate(-50%, -50%);
    }
    &-img {
      position: relative;
      z-index: 0;
      width: 680px;
      opacity: 1;
    }

    .location {
      position: absolute;
      top: 0;

      &-flag {
        width: 75px;
      }

      &-ripple {
        position: absolute;
        width: 32px;
        top: 40%;
        left: 16%;
      }

      &.huayuan {
        left: 39.5%;
        top: 37%;
      }
      &.bolong {
        left: 58%;
        top: 59%;
      }
      &.haiyang {
        left: 60%;
        top: 59.5%;
        z-index: 2;
      }
      &.shifangqu {
        left: 57%;
        top: 52%;
      }
    }

    .area {
      position: absolute;
      top: 0;
      cursor: pointer;

      &-txt {
        font-size: 18px;
        color: #02FBFF;
        position: absolute;
      }

      &:hover {
        .area-txt {
          color: #F0EA17;
        }
      }

      &.huayuan {
        left: 89%;
        top: 23%;
        background: url("~@/assets/screen/area-huayuan.png") no-repeat;
        width: 235px;
        height: 109px;

        .area-txt {
          top: 62%;
          left: 7%;
        }

        &:hover {

        }
      }

      &.bolong {
        left: 94%;
        top: 47%;
        width: 238px;
        height: 105px;
        background: url("~@/assets/screen/area-bolong.png") no-repeat;

        .area-txt {
          top: 45%;
          left: 18%;
        }

        &:hover {
        }
      }

      &.haiyang {
         left: 85%;
         top: 67%;
         width: 237px;
         height: 126px;
         background: url("~@/assets/screen/area-haiyang.png") no-repeat;

        .area-txt {
          top: 37%;
          left: 35%;
        }

         &:hover {
         }
       }

      &.shifangqu {
        left: 73%;
        top: 74%;
        width: 260px;
        height: 177px;
        background: url("~@/assets/screen/area-shifangqu.svg");

        .area-txt {
          top: 39%;
          left: 29%;
        }

        &:hover {
          background: url("~@/assets/screen/area-shifangqu-hover.svg");
        }
      }
    }

    .tray {
      position: absolute;
      width: 120px;
      height: 127px;
      background: url("~@/assets/screen/tray.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;

      &-title {
        font-size: 18px;
        text-align: center;
        margin-top: 12px;
      }
      &-bottom {
        display: flex;
        justify-content: center;
        align-items: baseline;
      }
      &-num {
        font-weight: bold;
        font-size: 30px;
      }
      &-unit {
        margin-left: 5px;
      }

      &.huayuan {
        left: 135%;
        top: 24%;
      }
      &.bolong {
        left: 135%;
        top: 47%;
      }
      &.haiyang {
        left: 135%;
        top: 67%;
      }
    }
  }
</style>
